<template>
	<view class="custabs flex">
		<view class="custabs-left transition" :class="current==0?'custabs-acv':'custabs-default'" @click="tabsClick(0)">{{nodes[0].name}}</view>
		<view class="custabs-right transition" :class="current==1?'custabs-acv':'custabs-default'" @click="tabsClick(1)">{{nodes[1].name}}</view>
	</view>
</template>

<script>
	export default {
		name: "cusTabs",
		props:{
			nodes:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				current: 0
			}
		},
		mounted() {},
		methods: {
			tabsClick(index){
				if(this.current==index)return
				this.current = index
				this.$emit("change",this.current)
			}
		}
	}
</script>

<style lang="scss">
	.custabs {
		width: 590rpx;
		height: 100rpx;
		.custabs-left{
			flex: 1;
			height: 100rpx;
			border-radius: 50rpx 0 0 50rpx;
			background-color: #23403D;
			line-height: 96rpx;
			text-align: center;
			border-width: 2rpx;
			border-style: solid;
			border-right: none;
		}
		.custabs-default{
			border-color: #0C1216;
			color: #84AAA6;
			font-size: 28rpx;
		}
		.custabs-acv{
			border-color: #00FF9A;
			color: #01FF9A;
			font-size: 32rpx;
		}
		.custabs-right{
			flex: 1;
			height: 100rpx;
			border-radius: 0 50rpx 50rpx 0;
			background-color: #23403D;
			line-height: 96rpx;
			text-align: center;
			border-width: 2rpx;
			border-style: solid;
			border-left: none;
		}
	}
</style>